<script setup lang="ts">
import { Children } from "@/types/homeTypes/homeTypes.ts";
import SubSkeleton from "@/views/category/components/subList/components/subSkeleton/subSkeleton.vue";

interface Props {
   children?: Children[];
}

defineProps<Props>();

</script>

<template>
   <div class="sub-list">
      <h3>全部分类</h3>
      <ul>
         <el-skeleton animated :count="7" :loading="!children?.length">
            <template #template>
               <sub-skeleton></sub-skeleton>
            </template>
            <template #default>
               <li v-for="(item) in children" :key="item.id" @click="$router.push({name:'subcategory',params:{id:item.id}})">
                  <a>
                     <img v-lazy="item.picture">
                     <p>{{ item.name }}</p>
                  </a>
               </li>
            </template>
         </el-skeleton>

      </ul>
   </div>
</template>

<style scoped lang="less">
.sub-list {
   margin-top: 20px;
   background-color: #fff;

   h3 {
      font-size: 28px;
      color: #666;
      font-weight: normal;
      text-align: center;
      line-height: 100px;
   }

   ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
         width: 168px;
         height: 160px;

         a {
            text-align: center;
            display: block;
            font-size: 16px;

            img {
               width: 100px;
               height: 100px;
            }

            p {
               line-height: 40px;
            }

            &:hover {
               color: @xtxColor;
            }
         }
      }
   }

   .el-skeleton{
      display: flex;
      padding: 0 32px;
   }
}
</style>
